/* Home.css 修改部分 */
/* 容器高度保持可滚动 */
.Home-box {
  min-height: 200vh;
  position: relative;
}

/* 返回顶部按钮 - 与帮助按钮一致的样式 */
.back-top-button {
  /* 定位 */
  position: fixed;
  right: 30px;
  bottom: 100px; /* 在蓝色按钮正上方 */
  
  /* 尺寸与蓝色按钮一致 */
  width: 50px;
  height: 50px;
  
  /* 视觉样式 */
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  
  /* 初始隐藏 */
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  
  /* 居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* 层级 */
  z-index: 1001; /* 高于帮助按钮 */
}

/* 显示状态 */
.back-top-button.visible {
  opacity: 1;
  visibility: visible;
}

/* 箭头样式 */
.arrow-up {
  color: #383f50;
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
  transform: translateY(-2px);
  user-select: none;
}

/* 悬停效果 */
.back-top-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}

/* 保持原有帮助按钮样式 */
.help-button {
  right: 30px;
  bottom: 30px;
  /* 其他样式保持不变 */
}
.Home-header {
  width: 100%;
  height: 56px;
  /* background-color: red; */
}

/* 头部右侧 */
.Home-header-right {
  position: absolute;
  top: 10px;
  right: 45px; /* 调整后，整体往左移动 */
  display: flex;
  align-items: center;
  gap: 16px;
}

.notice-icon {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  object-fit: contain;
}
/* 头像容器添加对齐 */
.avatar-wrapper {
  display: flex;
  align-items: center;
}
.avatar-image {
  width: 40px;
  height: 40px;
  object-fit: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  /* 这是一段 CSS 样式代码，用于设置元素的边框样式。具体含义为：给元素设置一个 1 像素宽的边框，
  边框的样式为实线（solid），边框颜色为黑色，其透明度为 0.1 。这里的 rgba 是一种表示颜色的方式，其中前三个值（0, 0, 0）
  分别代表红色、绿色、蓝色的分量值，都为 0 时表示黑色，最后一个值（.1）是透明度，取值范围从 0（完全透明）到 1（完全不透明） 。
  例如，在一个网页中给一个 div 元素应用此样式，该 div 元素就会显示出一个具有轻微透明度的黑色细边框。 */
  border: 1px solid rgba(0, 0, 0, 0.1);
  /* ，被替换的元素会被缩放，以完全覆盖其容器，同时保持其宽高比。 */
  object-fit: cover;
  cursor: pointer;
}
/* 头部弹框 */
.popup-box {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background-color: white;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  /* margin-top: 8px; */
  min-width: 200px;
}

.popup-content p {
  margin: 0;
  color: #333;
}

/* Add these new styles at the end of the file */
.popup-user-info {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}

.user-name-row {
  gap: 8px;
}

.user-name {
  font-weight: bold;
  font-size: 16px;
}

.creator-tag {
  background: #f3f4f9;
  margin-left: 13px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: #666;
}

.user-id {
  color: #8b97ae;
  cursor: pointer;
  font-size: 14px;
}

.copy-icon {
  width: 16px;
  height: 16px;
  margin-left: 5px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.copy-icon:hover {
  opacity: 1;
}

.Bulletframe {
  width: 400px;
  height: 548px;
  padding: 20px; /* 添加内边距 */
}

.Bulletframe-top {
  display: flex;
  width: 100%;
  height: 72px;
}
.Bulletframe-topbuttom {
  width: 400px;
  height: 100px;
  border-radius: 10px;
  margin-top: -13px;
  background-color: #dbe3ef;
}
.Bulletframe-topmian {
  display: flex;
}
.Bulletframe-VIp {
  width: 22px;
  height: 22px;
  margin-top: 11.5px;
  margin-left: 10px;
}
.Bulletframe-free {
  font-weight: bold;
  color: #505a71;
  font-size: 17px;
  padding: 0 6px;
  margin-top: 10px;
}
.Bulletframe-kai {
  margin-top: 10px;
}
.Bulletframe-kai button {
  width: 70px;
  height: 160%;
  background-color: #fce3d0;
  border-radius: 10px;
  border: none;
  position: absolute;
  right: 20px;
  top: 50%;
  font-size: 14px;
  transform: translateY(-50%);
  border-radius: 6px;
  /* 悬停出现小手 */
  cursor: pointer;
  color: #6b3d1e;
  transition: all 0.2s; /* 新增过渡动画 */
}
.Bulletframe-kai button:hover {
  background-color: #ffe0b8; /* 悬停时的新背景色 */
}
.Bulletframe-kaitop {
  margin-left: 10px;
  color: #333b4d;
  font-size: 15px;
  margin-bottom: 5px;
  position: relative; /* 新增 */
  padding-right: 130px; /* 为按钮留出空间 */
}
.Bulletframe-kaibom {
  font-size: 14px;
  margin-top: 2px;
  margin-left: 10px;
  color: #616a80;
}

.Bulletframe-three {
  width: 400px;
  height: 100px;
  margin-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px; /* 新增间距 */
}

/* 新增Storage部分的样式 */
.Bulletframe-Storage {
  width: 190px;
  height: 85px;
  border-radius: 10px;
  border: 1px solid #ebeef5;
  background-color: #ffffff;
  padding: 12px; /* 添加内边距 */
}

.storage-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.storage-label {
  color: #363d4e;
  cursor: default;
  font-size: 15px;
}
/* 在 .storage-content 下方添加 */
.storage-progress {
  width: 100%;
  height: 6px;
  background: #ebeef5;
  border-radius: 3px;
  margin-top: 21px;
}

.storage-progress-bar {
  width: 33%; /* 示例进度，根据实际需求调整 */
  height: 100%;
  /* background: #409eff; */
  border-radius: 3px;
}

.storage-usage {
  margin-top: 8px;
  font-size: 12px;
  color: #606266;
}
.storage-double {
  margin-left: 3px;
}
.storage-total {
  padding: 3px;
  font-size: 12px;
  color: #909cb2;
}
.storage-expand {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #666;
  cursor: pointer;
  transition: color 0.2s;
}
.storage-expand span {
  font-size: 11px;
  cursor: pointer;
  color: #8d94a3;
}
.storage-expand:hover {
  color: #333;
}

.expand-icon {
  font-size: 12px;
  transform: translateY(1px);
  opacity: 0.8;
}

/* 修改已有的.Bulletframe-AI */
.Bulletframe-AI {
  position: relative;
  width: 189px;
  height: 85px; /* 与Storage高度一致 */
  border-radius: 10px;
  border: 1px solid #ebeef5;
  background-color: #ffffff;
  padding: 12px; /* 添加与Storage一致的内边距 */
}

/* 添加AI内容布局 */

/* 调整AI部分其他元素的间距 */
.Bulletframe-AI h1 {
  margin: 6px 0;
  font-size: 24px;
}

.Bulletframe-AI > div:last-child {
  font-size: 12px;
  color: #616a80;
  margin-top: auto; /* 使底部文本对齐Storage的进度条位置 */
}
/* 修改问号图标样式 */
.question-icon {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #c0c6d2;
  color: #c0c6d2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  margin-left: auto; /* 新增：使图标靠右 */
  transition: all 0.2s;
}

/* AI弹框样式 */
.ai-popup-box {
  position: absolute;
  top: calc(100% + 10px);
  right: 100px;
  top: 40px;
  left: -256px;
  width: 320px;
  background: white;
  border-radius: 10px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 16px;
  z-index: 1001;
  font-size: 13px;
  line-height: 1.5;
}

.ai-popup-content p {
  margin: 0 0 13px 0;
  padding-bottom: 15px;
  color: #5a6479;
}
.ai-popup-content strong {
  color: #1b2337;
}
.ai-popup-content p:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* 问号图标悬停状态 */
.question-icon:hover {
  border-color: #8d94a3;
  color: #8d94a3;
}

/* 调整AI容器定位 */
.Bulletframe-AI {
  position: relative; /* 确保弹框定位基准 */
}
/* 修改问号图标样式 */
.ai-title-row {
  display: flex;
  align-items: center;
  width: 100%;
}
.ai-title-row > span:first-child {
  color: #1b2337;
  font-size: 13px;
  font-weight: 500;
}

.question-icon {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid #c0c6d2;
  color: #c0c6d2;
  display: inline-flex; /* 改为行内flex */
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  margin-left: 4px; /* 直接跟在文字后 */
  transition: all 0.2s;
  line-height: 1;
}

/* 添加AI操作容器 */
.ai-actions {
  margin-left: auto; /* 整体靠右 */
  display: flex;
  gap: 4px;
  cursor: pointer;
  color: #666;
}
.ai-actions span {
  color: #8d94a3;
  cursor: pointer;
  font-size: 11px;
}

.ai-month {
  position: absolute;
  color: #6b3d1e;
  bottom: -1px; /* 对齐父容器边框 */
  left: -1px; /* 对齐父容器左侧边框 */
  right: -1px; /* 对齐父容器右侧边框 */
  background: #fcdfc9;
  border-radius: 0 0 9px 9px; /* 仅圆角底部 */
  padding: 4px 12px;
  border-top: 1px solid #ebeef5; /* 与父容器边框衔接 */
}
/* 新增内容容器样式 */
.ai-month-content {
  display: flex;
  align-items: center;
  width: 100%;
  padding-right: 4px; /* 为图标留出呼吸空间 */
}

/* 文字部分自动撑满左侧 */
.ai-month span:first-child {
  margin-right: auto; /* 关键属性：吃满左侧空间 */
  white-space: nowrap; /* 禁止文字换行 */
}

/* 精准控制图标位置 */
.ai-month .expand-icon {
  order: 1; /* 确保图标在flex顺序最后 */
  margin-left: 8px; /* 文字与图标的最小间距 */
  transform: translateX(2px); /* 视觉微调 */
}
.ai-content h2 {
  color: #1b2337;
  font-style: 1px;
  font-weight: bold;
}

/* 个人版容器 */
.personal-Edition {
  width: 365px;
  height: 50px;
  border: 1px solid #ebeef5;
  border-radius: 10px;
  background-color: #ffffff;
  margin-top: 23px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}

/* 左侧内容 */
.personal-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 文字容器 */
.personal-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.4;
  gap: 10px;
}

/* 用户名 */
.user-name {
  font-size: 14px;
  color: #1b2337;
  font-weight: 500;
}

/* 版本类型 */
.edition-type {
  font-size: 12px;
  color: #677085;
}

/* 创建团队按钮 */
.create-team {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #1b2337;
  font-size: 14px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background-color 0.2s;
  height: 36px; /* 固定高度与上方元素对齐 */
}
/* 为你推荐 */

.create-team-badge {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  right: -8px;
  top: -8px;
  width: 48px;
  height: 16px;
  padding: 0.8px 4px 1.2px 4px;
  text-align: center;
  border-radius: 8px 8px 8px 0;
  font-size: 10px;
  font-weight: 510;
  color: #fff;
  background: linear-gradient(90deg, #0773fc, #189eff);
  z-index: 1;
}

/* 加号图标 */
.plus-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 30px;
  line-height: 1;
  font-weight: 300;
  transform: translateY(-1px); /* 视觉微调 */
}

/* 悬停效果 */
.personal-Edition:hover {
  background-color: #f3f4f9;
}

/* 订单 */
/* 修改cursor-box样式 */
.cursor-box {
  margin-top: 17px;
  width: 398px;
  border-radius: 10px;
  background-color: #ffffff;
  overflow: hidden; /* 确保子元素圆角不溢出 */
}

.cursor-slider {
  width: 100%;
  height: 46px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  transition: background-color 0.2s;
  cursor: pointer;
}

/* 去掉最后一个元素的分割线 */
.cursor-slider:last-child {
  border-bottom: none;
}

.cursor-slider:hover {
  background-color: #f3f4f9;
}

.cursor-order {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

.order-text {
  font-size: 14px;
  color: #1b2337;
}

/* 退出登录容器 */
.log-out {
  margin-top: 16px;
  border-top: 1px solid #ebeef5;
  cursor: pointer; /* 整个区域可点击 */
}

/* 文字内容 */
.log-out-content {
  text-align: center;
  padding: 12px 0;
  color: #606266;
  font-size: 14px;
  width: 100%;
  transition: color 0.3s ease; /* 平滑过渡效果 */
}

/* 悬停状态 */
.log-out-content:hover {
  color: #fb5757;
}

/* 退出登录 */
/* Home.css */
.log-out {
  margin-top: 16px;
  border-top: 1px solid #ebeef5;
  cursor: pointer;
}

.log-out-content {
  text-align: center;
  padding: 12px 0;
  color: #606266;
  font-size: 14px;
  width: 100%;
  transition: color 0.3s ease;
}

.log-out-content:hover {
  color: #fb5757;
}

/* 复制提示框样式 */
.copy-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  padding: 12px 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  font-size: 14px;
  color: #333;
  z-index: 9999;
  animation: toastSlide 0.3s ease-out;
  border: 1px solid #ebeef5;
}

@keyframes toastSlide {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}


/* 企业服务栏样式 */
/* 企业服务栏样式 */
.enterprise-service {
  width: auto; /* 改为自动宽度 */
  min-width: 65px; /* 最小宽度 */
  height: 33px;
  background-color: #e6f1fe;
  border-radius: 8px;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  gap: 4px; /* 图片和文字间距 */
  padding: 0 10px; /* 左右内边距 */
  cursor: pointer;
  transition: background-color 0.2s;
}

/* 图片样式 */
.enterprise-service img {
  width: 16px; /* 调整图片宽度 */
  height: 16px; /* 调整图片高度 */
  object-fit: contain; /* 保持比例 */
  display: block; /* 避免基线对齐问题 */
}

/* 文字样式 */
.service-text {
  font-size: 12px;
  color: #1d80fc;
  white-space: nowrap; /* 防止文字换行 */
}

.enterprise-service:hover {
  background-color: #d0e3ff;
}

/* 开通会员框样式 */
.vip-service {
  width: auto;
  min-width: 65px;
  height: 33px;
  background-color: #fce3cf;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 10px;
  cursor: pointer;
  transition: background-color 0.2s;
  margin-right: 10px; /* 添加右边距与后面的元素分开 */
}

.vip-service:hover {
  background-color: #ffe0b8;
}

.vip-service img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: block;
}

.vip-text {
  font-size: 12px;
  color: #6b3d1e;
  white-space: nowrap;
}


/* 右下角问号 */
/* Help button styles */
.help-button {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 50px;
  height: 50px;
  background-color: #0773fc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  transition: all 0.3s ease;
}

.help-button:hover {
  background-color: #0668e0;
  transform: scale(1.05);
}
/* 帮助按钮容器 */
.help-button-container {
  position: fixed;
  right: 30px;  /* 向右移动 */
  bottom: 30px; /* 向上移动 */
  z-index: 1000;
}

/* 问号圆圈按钮 */
.help-button {
  position: fixed;
  right: 30px;  /* 原为 20px，向左移动 10px */
  bottom: 30px; /* 原为 20px，向上移动 10px */
  /* 其他样式保持原样 */
  width: 50px;
  height: 50px;
  background-color: #0773fc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.help-button:hover {
  background-color: #0668e0;
  transform: scale(1.05);
}

/* 弹框样式 - 现在显示在左侧 */
.help-popup-box {
  position: absolute;
  right: calc(100% + 60px);
  bottom: 0;
  width: 200px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 1001;
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

/* 鼠标悬停在容器上时显示弹框 */
.help-button-container:hover .help-popup-box {
  opacity: 1;
  visibility: visible;
}

/* 弹框菜单项 */
.help-popup-item {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.help-popup-item:hover {
  background-color: #f3f4f9;
}

.help-popup-icon {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

.help-popup-text {
  font-size: 14px;
  color: #1b2337;
}

.text-item, .image-item, .expand-button, .expanded-item {
  border: none !important; /* 移除所有边框 */
}

.title-item {
  font-size: 20px; /* 调大字号 */
  font-weight: 700; /* 加粗 */
  margin-right: 25px; /* 与后续元素间距 */
  color: #333;
}

.image-placeholder {
  /* 移除边框 */
  background-color: #f5f5f5;
}

.expand-button {
  /* 移除边框 */
  background: transparent;
  font-size: 18px;
}